<template>
  <div class="playController">
    <!-- 左侧头像和提示文字区域 -->
    <div class="left" @click="showSongView()">
      <img :src="$store.state.playlist[$store.state.playCurrentIndex].al.picUrl" >
      <div class="content">
        <div class="title">{{$store.state.playlist[$store.state.playCurrentIndex].al.name}}</div>
        <div class="tips">横划可以切换上下首哦</div>
      </div>
    </div>
    <!-- 右侧播放区域 -->
    <div class="right" >
      <!-- 播放图标 -->
      <svg v-show="$store.state.toggle" class="icon" aria-hidden="true" @click="play">
          <use xlink:href="#icon-bofang3"></use>
      </svg>
      <!-- 暂停图标 -->
      <svg v-show="$store.state.toggle === false" class="icon" aria-hidden="true" @click="play">
          <use  xlink:href="#icon-zanting2"></use>
      </svg>
      <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-yinleliebiao"></use>
      </svg>
    </div>
    <!-- 播放歌曲界面组件 -->
    <transition mode="out-in" appear >
      <!-- 可以直接传递一个函数 -->
      <playMusic :play="play" @back="show=!show"  v-show="show" :playDetail="$store.state.playlist[$store.state.playCurrentIndex]"></playMusic>
    </transition>

    <audio  ref="audioRef" :src="`https://music.163.com/song/media/outer/url?id=${$store.state.playlist[$store.state.playCurrentIndex].id}.mp3`"></audio>

  <!-- 歌曲播放界面 -->
  <!-- <van-popup 
  v-model:show="show" 
  closeable 
  close-icon="arrow-down" 
  close-icon-position="top-left" 
  :position="'bottom'" 
  :style="{height: '100%' }"
  >
    
  </van-popup> -->
  </div>
</template>

<script setup>
import { Toast } from 'vant';
import  playMusic from '@/components/playMusic.vue'
import { ref } from "@vue/reactivity";
import { computed, nextTick, onBeforeMount, onMounted, onUpdated} from "vue";
import { useStore } from 'vuex'

// 控制歌曲主界面的显示和隐藏
const show = ref(false);

const store = useStore()

// 对媒体标签进行引用，拿到它身上的播放链接，相当于 audioRef 就是 audio 标签了
let audioRef = ref(null)


//TODO 点击播放 ↓↓↓
const play = () => {
  // 判断 audio 的 paused（暂停）属性，true代表暂停中，false代表播放中
  // console.log([audioRef.value]);
  if (audioRef.value.paused) {
    audioRef.value.play() // 为 false 的时候，就让它播放
    audioRef.value.autoplay = true  // 自动播放，直接点击暂停才会暂停
    store.state.toggle = false
    UpdateTime()
  } else {
    audioRef.value.pause()  // 为 true 的时候就让它暂停
    // audioRef.value.autoplay = false
    store.state.toggle = true
    clearInterval(store.state.intervalId) // 暂停时取消
  }
}

//TODO 点击切换歌曲界面 ↓↓↓
const showSongView = () => {
  show.value = !show.value
}

//TODO 更新歌曲时间 ↓↓↓
const UpdateTime = () => {
  store.state.intervalId = setInterval(() => {
    store.commit('setCurrentTime', audioRef.value.currentTime)
  }, 1000)
}

//! 当前组件更新时，就会触发的生命周期函数
onUpdated(()=> {
  store.dispatch('reqLyric', {id: store.state.playlist[store.state.playCurrentIndex].id})
  // 判断房钱歌曲是否可放
  if (audioRef.value.error) {
    store.state.toggle = true
    Toast.fail('暂无版权');
  }
})


onBeforeMount(() => {
  // store.state.playlist = []

})

onMounted(() => {
  UpdateTime()

  
  nextTick(() => {
  })
})
</script>

<style lang="less" scoped>
.playController {
  background-color: #fff;
  width: 7.5rem;
  height: 1.2rem;
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center; 
  border-top: 1px solid #eee;
  .left {
    display: flex;
    padding: 0 0.15rem;
    img {
      width: 0.8rem;
      height: 0.8rem;
      border-radius: 0.4rem;
    }
    .content {
      padding: 0 0.15rem;
      .title {
        font-size: 0.28rem;
      }
      .tips {
        font-size: 0.2rem;
        color: #999;
      }
    }
  }
  .right {
    // margin-right: -85px;
    .icon {
      width: 0.5rem;
      height: 0.5rem;
      margin: 0 0.25rem;
    }
  }
}

// .v-enter-active,.v-leave-active{
//     transition:all 0.6s;
// }
// .v-leave-to{
//     margin-left: 400px;
// }
// .v-enter {
//     margin-left:400px;
// } 

// .v-enter-from {
//   transform: translateY(0);
// }
// .v-enter-to{
//   transform: translateY(-400px);

// }
// .v-leave-to {
//   transform: translateY(800px);
// }
// .v-enter-active {
//   transition: all .5s ease-in
// }
// .v-leave-active {
//   transition: all .5s ease-out
// }


.v-enter-from {
  opacity: 0;
}
.v-enter-active,
.v-leave-active {
  transition: opacity .4s;
}
.v-enter-to {
  opacity: 1;
}
.v-leave-to {
  opacity: 0;
}


</style>